<template>
  <div class="app-container calendar-list-container">
    <el-button class="filter-item" type="primary" @click="cancel">返回</el-button>
    <el-button class="filter-item" type="primary" v-print="'#printBox'">打印</el-button>
    <div class="w-body info_form" id="printBox">
      <el-form :model="entity" ref="entity" label-width="80px" size="small">
        <el-row class="r-form-row">
          <el-col :span="24">
            <div class="view-title">业务订单:{{entity.orderNo}}</div>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="客户名称:" prop="customerName">
              {{entity.customerName}}
            </el-form-item>
          </el-col>
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="发货时间:" prop="sendTime">
              {{entity.sendTime}}
            </el-form-item>
          </el-col>
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="业务员:" prop="ownerName">
              {{entity.ownerName}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否含税:" prop="tax">
              {{entity.tax==1?'是':'否'}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="付款方式:" prop="payType">
              {{entity.payType}}
            </el-form-item>
          </el-col>
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="运输方式:" prop="transport">
              {{entity.transport}}
            </el-form-item>
          </el-col>
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="运输费用:" prop="transportFee">
              {{entity.transportFee}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="币种:" prop="currency">
              {{entity.currency}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="数量:" prop="quantity">
              <span>{{entity.quantity}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="总金额:" prop="totalAmount">
              <span>{{entity.totalAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="r-form-cell">
            <el-form-item label="创建人:" prop="createUserName">
              <span>{{entity.createUserName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间:" prop="createTime">
              <span>{{entity.createTime}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="r-form-row">
          <el-col :span="18">
            <div v-html="entity.remark" class="full-text-content"></div>
          </el-col>
        </el-row>
        <div class="w-table">
          <grid gridTitle="物品信息" :columns="columns" :enableEdit="false" :loading="false" ref="mainGrid" :pagination="false" :permissions="permissions"
            cellClassName="table-view-row" headerCellClassName="table-view-row"></grid>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import GridDialog from '@/components/GridDialog'
import grid from '@/components/Grid'
import { mapGetters } from 'vuex'

export default {
  components: { GridDialog, grid },
  data () {
    return {
      orderNo: '',
      customerUrl: url.CUSTOMER_LIST_URL,
      goodsUrl: url.MODEL_LIST_URL,
      entity: {
        customerCode: '',
        customerName: '',
        goods: []
      },
      columns: [
        { label: this.global.modelName, width: 50, prop: 'goodsName', align: 'left' },
        { label: this.global.modelProp, width: 50, prop: 'modelProp', align: 'left' },
        { label: '物料名称', width: 195, prop: 'materialName', align: 'left' },
        { label: '克重', width: 80, prop: 'weight', align: 'center' },
        // { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
        { label: '单位', width: 60, prop: 'unit', align: 'center' },
        { label: '单价', width: 60, prop: 'price', align: 'center' },
        { label: '客户型号', width: 90, prop: 'customerModelName', align: 'center' },
        { label: '客户色号', width: 80, prop: 'customerModelProp', align: 'center' },
        { label: '数量', width: 80, prop: 'quantity', align: 'center' },
        { label: '总价', width: 90, prop: '', align: 'center', formatter: function (row) { return (row.price * row.quantity).toFixed(2) } },
        { label: '备注', width: 115, prop: 'remark', align: 'center' }
      ]
    }
  },
  created () {
    this.orderNo = this.$route.query.orderNo
    this.init()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    init () {
      this.initData()
    },
    cancel () {
      this.$router.push({ path: '/prod/order', query: {} })
    },
    initData () {
      this.viewUrl(this.orderNo).then(data => {
        if (data) {
          this.entity = data
          data.goods.forEach(row => {
            this.$refs['mainGrid'].addRow(row)
          })
        }
      })
    },
    viewUrl (orderNo) {
      return request({
        url: url.ORDER_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { orderNo }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-body {
  padding-top: 8px;
  width: 1024px;
}
.w-table {
  border: 1px solid #ebeef5;
}
.w-table-title {
  border: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  color: gray;
}

.view-title {
  width: 100%;
  height: 60px;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}

.grid-rq {
  border: 1px solid black !important;
}
</style>
